<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Vocabulary visualizer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <script type="text/javascript" src="js/vendor/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/jQSparqlCache.js"></script>
    <script type="text/javascript" src="js/d3.js"></script>
    <script src="js/V2.js"></script>
    <!-- CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <style type="text/css">

      html,
      body { height: 100%; }

      #wrap {
        min-height: 100%;
        height: auto !important;
        height: 100%;
      }
      
      .container {
		width:100%;
		position:absolute;              
		min-height:100%; !important /* browser fill */
		height:auto;
	  }
	  
	.edetails {
	padding-top: 2px;
	padding-left: 5px;
	margin-top: 5px;
	border:2px solid;
	border-radius:5px;
	-moz-border-radius:5px; /* Old Firefox */
	}

	.defs {
	padding-top: 2px;
	padding-left: 5px;
	margin-top: 5px;
	border:2px solid;
	border-radius:5px;
	-moz-border-radius:5px; /* Old Firefox */
	font-size: 10px;
	line-height:100%;
	}


	.details {
	  color:black;
	  font-size: 10px;
	  font-weight: bold;
	  background-color:rgba(255,255,255,1);
	  padding: 10px;
	  border-radius: 8px;
	  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	  position: relative;
	 font-family: sans-serif;
	}
		  
	#details {
		font-size: 12px;
		margin-top: 20px;
		margin-left: 5px;
		width: 300px;
		float: right; 
		position:relative;
		right:0;
		top:0;
	}

	#details h1 { font-size: 20px;}

	#details h2 { margin: 0; font-size: 15px;}

	#details h3 { margin: 0; padding: 0; font-size: 10px;}

	#details p { margin: 0; }
	 
	#svg { user-select: none; }

	#title {
		opacity:0.4;
	   -webkit-text-stroke-width: 1px;
	   -webkit-text-stroke-color: white;
		position: absolute;
		top: 30%;
		left: 30%;
		z-index:1;
		-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default;
	}

	.link {
	  stroke: #000;
	  stroke-width: 0.5px;
	}

	.elink {
	  stroke: #000;
	  stroke-width: 0.5px;
	  opacity: 0;
	}



	.tip {
		user-select: none;
		fill: #000000;
		stroke: #000000;
		font-family: sans-serif;
		font-size: 12px;
		stroke-width: 0.2;
	}

	.text {
	  fill: #ffffff;
	  stroke: #ffffff;
	  pointer-events: none;
	  font-family: sans-serif;
	  user-select: none;
	}

	.label {
	  stroke: #000000;
	  stroke-width: 0.2;
	  pointer-events: none;
	  font-family: sans-serif;
	  user-select: none;
	}

	.node:hover .text {
	   fill: #E0E0E0;
	   stroke: #E0E0E0;
	}

	.graph {
	 fill: #FC425A;   
	}


	path.link {
	  fill: none;
	  stroke: #666;
	  stroke-width: 1.5px;
	}

	marker#licensing {
	  fill: green;
	}

	path.link.licensing {
	  stroke: green;
	}

	path.link.resolved {
	  stroke-dasharray: 0,2 1;
	}

	.node {
	  
	  stroke: #000;
	  stroke-width: 0px;
	  cursor: default;
	  user-select: none;
	}

	.endpoint {
		stroke: white;
		stroke-width: 1px;
		cursor: default;
		user-select: none;
	}

	.endpoint:hover + .group {
		opacity: 0.8;
	}

	.group {
		
		opacity: 0.1;
	}

	.button { display: block;}

	   ul {
		list-style-type: none;
		list-style: none;
		margin-left: 1;
		text-indent: -3px;
		}
		
	.namespaces {
	  margin-left: 5px;;
	  font-size: 10px;
	}
</style>
<body>
	<div id="wrapper">
      <div id="title"><h3 id="load"></h3></div>
      <div id="svg" class="container"></div>
      <div id="details"><div id="es"><h1>Vocabulary visualizer</h1><p style="margin-top: 20px;"><h2>What is this?</h2>This demo (ESWC 2013 <a href="http://www.seco.tkk.fi/publications/2013/alonen-et-al-loa-eswc-2013.pdf">pdf</a> <a href="http://www.seco.tkk.fi/publications/2013/hyvonen-et-al-birdwatch-2013.bib">bib</a>) visualizes usage of linked data vocabularies in multiple datasets. You can add and remove endpoints from +/- and edit endpoints by clicking.</p><h5>Edit endpoints <a id="add">+</a> <a id="remove">-</a></h5><ul id="endpoints"></ul><a class="btn" id="ok">I'm ready for it!</a></div></div>
   </div>
</body>
</html>
